<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>菜单管理</title>
        <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    </head>
    <body class="pear-container">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="menu-table" lay-filter="menu-table"></table>
            </div>
        </div>

        <script type="text/html" id="menu-toolbar">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
                新增
            </button>
            <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
                <i class="layui-icon layui-icon-delete"></i>
                删除
            </button>
        </script>

        <script type="text/html" id="menu-bar">
            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
            <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
        </script>

        <script type="text/html" id="menu-enable">
            <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="menu-enable"  {{d.state==1?'checked':''}} />
        </script>

        <script type="text/html" id="icon">
            <i class="layui-icon {{d.icon}}"></i>
        </script>

        <script src="../../component/layui/layui.js"></script>
        <script src="../../component/pear/pear.js"></script>
        <script>
            layui.use(['table','form','jquery','treetable','toast'],function () {
                let table = layui.table;
                let form = layui.form;
                let $ = layui.jquery;
                let treetable = layui.treetable;
                let toast = layui.toast;

                let MODULE_PATH = "${ctxPath}/menu/";

                window.render = function(){
                    treetable.render({
                        treeColIndex: 1,
                        treeSpid: -1,
                        treeIdName: 'id',
                        treePidName: 'parent',
                        skin:'line',
                        treeDefaultClose: true,
                        toolbar:'#menu-toolbar',
                        elem: '#menu-table',
                        url: MODULE_PATH + 'data/list',
                        page: false,
                        defaultToolbar: '',
                        height: 'full-70',
                        cols: [
                            [
                                {type: 'checkbox'},
                                {field: 'title', minWidth: 200, title: '菜单名称'},
                                {field: 'icon', title: '图标',templet:'#icon'},
                                {field: 'href', minWidth: 200, title: '链接'},
                                {field: 'sort', title: '排序'},
                                {field: 'state', title: '状态',templet:'#menu-enable'},
                                {field: 'createtime', minWidth: 200, title: '创建时间'},
                                {title: '操作',templet: '#menu-bar', width: 150, align: 'center'}
                            ]
                        ]
                    });
                }

                render();

                table.on('tool(menu-table)',function(obj){
                    if (obj.event === 'remove') {
                        window.remove(obj);
                    } else if (obj.event === 'edit') {
                        window.edit(obj);
                    }
                })


                table.on('toolbar(menu-table)', function(obj){
                    if(obj.event === 'add'){
                        window.add();
                    } else if(obj.event === 'batchRemove'){
                        window.batchRemove(obj);
                    }
                });

                form.on('switch(menu-enable)', function(obj) {
                    let loading = layer.load();
                    $.ajax({
                        url: MODULE_PATH+"data/changeState?id="+this.value+"&state="+(obj.elem.checked?1:0),
                        dataType:'json',
                        type:'post',
                        success:function(result){
                            layer.close(loading);
                            if(result.code == 0) {
                                toast.success({title: "系统消息", message: result.message,position: 'topRight'});
                            }else{
                                toast.error({title: "系统消息",message: result.message,position: 'topRight'});
                            }
                        }
                    });
                });

                window.add = function(){
                    layer.open({
                        type: 2,
                        title: '新增菜单',
                        shade: 0.1,
                        area: ['490px', '460px'],
                        content: MODULE_PATH + 'data/add'
                    });
                }

                window.edit = function(obj){
                    layer.open({
                        type: 2,
                        title: '修改菜单',
                        shade: 0.1,
                        area: ['490px', '460px'],
                        content: MODULE_PATH + 'data/edit?id='+obj.data['id']
                    });
                }
                window.remove = function(obj){
                    layer.confirm('确定要删除该菜单？', {icon: 3, title:'提示'}, function(index){
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: MODULE_PATH+"data/remove?ids="+obj.data['id'],
                            dataType:'json',
                            type:'delete',
                            success:function(result){
                                layer.close(loading);
                                if(result.code == 0){
                                    layer.msg(result.message,{icon:1,time:1000},function(){
                                        obj.del();
                                    });
                                }else{
                                    layer.msg(result.message,{icon:2,time:1000});
                                }
                            }
                        })
                    });
                }

                window.batchRemove = function(obj) {
                    let data = table.checkStatus(obj.config.id).data;
                    if (data.length === 0) {
                        layer.msg("未选中记录", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    let ids = "";
                    for (let i = 0; i < data.length; i++) {
                        ids += data[i].id + ",";
                    }
                    ids = ids.substr(0, ids.length - 1);
                    layer.confirm('确定要删除这些菜单？', {
                        icon: 3,
                        title: '提示'
                    }, function(index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: MODULE_PATH + "data/remove?ids=" + ids,
                            dataType: 'json',
                            type: 'delete',
                            success: function(result) {
                                layer.close(loading);
                                if (result.code == 0) {
                                    layer.msg(result.message, {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        table.reload('menu-table');
                                    });
                                } else {
                                    layer.msg(result.message, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    });
                }

                window.refresh = function(param) {
                    table.reload('menu-table');
                }
            })
        </script>
    </body>
</html>